<template>
	<view class="main">
		<!-- <back-fixed :title="title" urlBack='/pages/team/index'></back-fixed> -->
		<empty-team v-if="empty"></empty-team>
		<view class="card_box">
			<u-gap height="20" bg-color="#f8f8f8"></u-gap>
			<view class="fuzeren" v-if="leader !== undefined" @click="goMember(leader)">
				<view class="fuzeren_title">
					负责人
				</view>
				<view class="list">
					<view class="list_left">
						<mid-avatar :nickName="leader.userName" :avatar="leader.avatar" sex="0"></mid-avatar>
						<!-- <u-avatar :src="leader.avatar" size="90"></u-avatar> -->
						<!-- <view class="avatar"></view> -->
						<view class="txt">
							<view class="top">
								{{leader.userName}}<span
									class="gray p-l-20">{{leader.roleName ? leader.roleName : ''}}</span>
							</view>
							<view class="bottom">
								<view class="phone gray">
									{{leaderNumberHidden ? phoneNumber(leader.phoneNumber) : leader.phoneNumber}}
								</view>
								<view class="action" @click.stop="leaderNumberHidden = !leaderNumberHidden">
									<u-image :src="leaderNumberHidden ? hidden:exp " width="36rpx"
										height="36rpx"></u-image>
								</view>
							</view>
						</view>
					</view>
					<view class="list_right">
						<u-icon name="arrow-right" color="#ccc" size="36rpx"></u-icon>
					</view>
				</view>
			</view>
			<u-gap height="20" bg-color="#f8f8f8"></u-gap>
			<view class="other">
				<view class="fuzeren_title">
					其他成员
				</view>
				<view class="img_empty" v-if="other.length == 0">
					<u-image :src="emptyImg" width="335rpx" height="320rpx"></u-image>
					<view class="txt">
						暂无其他成员
					</view>
				</view>
				<view class="ohter_box" v-for="val,key in other" :key="val.teamUserId" v-if="other.length > 0">
					<view class="list" @click="goMember(val)">
						<view class="list_left">
							<mid-avatar :avatar="val.avatar" :nickName="val.userName" sex="0"></mid-avatar>
							<!-- <u-avatar :src="val.avatar" size="90"></u-avatar> -->
							<view class="txt">
								<view class="top">
									{{val.userName}}<span
										class="gray p-l-20">{{val.roleName ? val.roleName : '' }}</span>
								</view>
								<view class="bottom">
									<view class="phone gray">
										{{val.hidden ? phoneNumber(val.phoneNumber) :val.phoneNumber}}
									</view>
									<view class="action" @click.stop="hiddenOther(other,key)">
										<u-image :src="val.hidden ? hidden : exp " width="36rpx"
											height="36rpx"></u-image>
										<!-- <u-image :src="" width="30rpx" height="20rpx" v-show="!val.hidden"></u-image> -->
									</view>
								</view>
							</view>
						</view>
						<view class="list_right">
							<u-icon name="arrow-right" color="#ccc" size="36rpx"></u-icon>
						</view>
					</view>
					<view class="line_box">
						<u-line class="u-line"></u-line>
					</view>
				</view>
				<view class="finished" v-if="!emptyOther">
					—— 已经到底 ——
				</view>
			</view>
			<view class="sticky">
				<view class="my_button" @click.stop="addUser">
					添加团队成员
				</view>
				<!-- <u-button  type="success">创建团队</u-button> -->
			</view>
		</view>
		<go-nav></go-nav>
	</view>
</template>

<script>
	import {
		getTeamUserListByTeamId
	} from '@/api/index.js'
	export default {
		data() {
			return {
				title: '',
				leaderNumberHidden: true,
				empty: false,
				emptyOther: false,
				hidden: require('@/static/img/Phone_Hidden@2x.png'),
				emptyImg: require('@/static/img/member_empty.png'),
				exp: require('@/static/icon/Phone_Expanded@2x.png'),
				show: '',
				leader: {
					avatar: '',
					userName: '',
					roleName: '',
					phoneNumber: ''
				}, //负责人{},
				other: [], //其他成员
				teamId: null,
				list: [],
				status: 'loading',
				pageNum: 1, //当前条目数
				totalCount: 0, //总条目数
				pageSize: 15, //每页总条数
				avg: 0, //总页数
				first: true
			}
		},
		computed: {
			phoneNumber(number) {
				return (number) => {
					//135****5841
					if (number && number.length > 0) {
						return number.slice(0, 3) + '****' + number.slice(7, 11)
					}
					return number
				}
			}
		},
		onLoad(obj) {
			//console.log(obj,123);
			if (obj.title) {
				if (obj.title.length > 6) {
					this.title = obj.title.slice(0, 6) + '...'
				} else {
					this.title = obj.title.slice(0, 6)
				}
				this.$store.commit('TEAMTITLESET', this.title)
			}
			if (obj && obj.id !== undefined) {
				this.$store.commit('TEAMIDS', obj.id)
				this.teamId = obj.id
				this.getUserList()
			} else {
				this.getUserList()
				//this.$u.toast('暂无teamId，无法查询到列表')
			}
			//console.log(obj,123);
		},
		onShow() {
			const title = this.$store.state.doc.teamTitle
			if (title) this.title = title
		},
		methods: {
			hiddenOther(other, key) {
				//this.$set(this.other[key], 'hidden', !this.other[key].hidden);
				this.other[key].hidden = !this.other[key].hidden
				this.$forceUpdate() //强制更新视图
				//console.log(this.other[key].hidden);
			},

			async getUserList(id = this.$store.state.doc.teamId) {
				let obj = {
					'pageNum': this.pageNum,
					'pageSize': this.pageSize,
					'teamId': id
				}
				if (this.pageNum > this.avg && !this.first) {
					this.status = 'nomore'
					return
				}
				if (this.pageNum == this.avg && this.status !== 'nomore') {
					let res = await getTeamUserListByTeamId(obj)
					if (res.code == 200) {
						this.status = 'nomore'
						this.first = false
						this.totalCount = res.total
						this.avg = Math.ceil(this.totalCount / this.pageSize)
						this.pageNum = ++this.pageNum
						this.list.push(...res.rows)
						this.leader = res.rows.find(v => v.isLeaderInTeam == 1)
						//this.title = this.leader.userName + '的团队'
						//this.title = this.leader.userName
						this.other = res.rows.filter(v => {
							if (v.isLeaderInTeam == 0) {
								v.hidden = true //默认隐藏
								return v
							}
						})
						if (this.other.length < 1) {
							this.emptyOther = true
						} else {
							this.emptyOther = false
						}
						return
					}
				}
				let res = await getTeamUserListByTeamId(obj)
				if (res.code == 200) {
					this.first = false
					this.totalCount = res.total
					this.avg = Math.ceil(this.totalCount / this.pageSize)
					this.pageNum = ++this.pageNum
					this.list.push(...res.rows)
					this.leader = res.rows.find(v => v.isLeaderInTeam == 1)
					//this.title = this.leader.userName + '的团队'
					this.other = res.rows.filter(v => {
						if (v.isLeaderInTeam == 0) {
							v.hidden = true //默认隐藏
							return v
						}
					})
					if (this.other.length < 1) {
						this.emptyOther = true
					} else {
						this.emptyOther = false
					}
				}
			},
			addUser() {
				this.teamId = this.$store.state.doc.teamId
				if (this.teamId && this.teamId !== null) {
					uni.redirectTo({
						url: `/pages/team/addUser?teamId=${this.teamId}`
					})
				} else {
					this.$u.toast('缺少teamId')
				}
				//this.$u.route(')
			},
			goMember(obj) {
				//console.log(obj);
				uni.redirectTo({
					url: `/pages/team/member?userId=${obj.userId}`
				})
			},
			clearPageStatus() {
				this.list = []
				this.first = true
				this.status = 'loading';
				this.pageNum = 1 //当前条目数
				this.totalCount = 0 //总条目数
				this.avg = 0
			},
		},
	}
</script>

<style lang="scss" scoped>
	.main {
		position: absolute;
		height: 100vh;
		width: 100%;
		background: white;

		.card_box {
			//margin-top: 40px;
			background-color: white;

			.fuzeren {
				padding-left: 24rpx;
				//margin-bottom: 20rpx;

			}

			.fuzeren_title {
				padding-top: 28rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 800;
				font-size: 36rpx;
				color: #212121;
				line-height: 42rpx;
			}

			.other {
				padding-left: 24rpx;
				padding-bottom: 260rpx;

				.img_empty {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					text-align: center;
					padding-top: 40rpx;

					.img {
						padding-top: 25vh;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
					}

					.txt {
						margin-top: 10rpx;
						font-weight: 500;
						font-size: 22px;
						color: #C7C7C7;
						line-height: 38rpx;
						text-align: center;
					}
				}

				.finished {
					margin-top: 40rpx;
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #CCCCCC;
					line-height: 33rpx;
					text-align: center;
				}

				.ohter_box {}
			}

			.line_box {
				display: flex;
				justify-content: flex-end;

				.u-line {
					padding-left: 90rpx;
					//width: 300rpx;
				}
			}

			.list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-bottom: 20rpx;

				.list_left {
					padding-top: 24rpx;
					display: flex;

					.avatar {
						border-radius: 50%;
						height: 90rpx;
						width: 90rpx;
						background-color: #999;
					}

					.txt {
						font-family: PingFang SC, PingFang SC;

						// font-size: 32rpx;
						// color: #212121;
						// line-height: 38rpx;
						// padding-left: 16rpx;

						margin-top: 10rpx;
						font-size: 32rpx;
						color: #C7C7C7;
						line-height: 38rpx;
						text-align: center;
						margin-left: 16rpx;


						.gray {
							font-size: 26rpx;
							line-height: 30rpx;
							color: #666666;
						}

						.top {
							color: #212121;
						}

						.bottom {
							display: flex;
							align-items: center;
							padding-top: 6rpx;

							//line-height: 56rpx;
							.phone {}

							.action {
								padding-left: 25rpx;
								//padding-bottom: 56rpx;
							}
						}
					}
				}

				.list_right {
					padding-right: 30rpx;
				}
			}

			.sticky {
				width: 100%;
				padding: 0 24rpx;
				position: fixed;
				bottom: 0;
				padding-bottom: 80rpx;
				background-color: #FFFFFF;

				.my_button {
					background-color: #4DC0D9;
					font-family: PingFang SC, PingFang SC;
					//font-weight: bold;
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 38rpx;
					text-align: center;
					padding: 20rpx 0;
					border-radius: 20rpx;
				}
			}
		}
	}
</style>